<template>
  <span class="float-list">
    <div class="right-ctrl-panel">
      <div class="weather-ctrl" @click="fly()"></div>
      <div class="info-ctrl" @click="toggleList()">交通事件/事故多发地</div>
    </div>
    <!--设置一下进入动画-->
    <transition  name="fade">
      <div class="right-panel" v-if="listOpen">
      <div class="info-header">
        <div :class="activeItem1" id="traffic-btn" @click="toggleListInfo('incident')">交通事件</div>
        <div :class="activeItem2" id="event-btn" @click="toggleListInfo('blackspot')">事故多发地</div>
        <div class="clear"></div>
      </div>
      <div class="info-body">
      </div>
    </div>
    </transition>

  </span>
</template>

<script>
  export default {
    name: 'FloatList',
    data(){
      return {
        map: null,
        mapPos: {
          center: [109.84, 40.657],
          zoom: 12,
          pitch: 60,
          speed: 0.5,
          bearing: 3
        },
        weatherPos: {
          center: [110.084121, 41.546542],
          zoom: 7.1,
          bearing: 0,
          speed: 0.5,
          pitch: 0
        },
        mapState: 'map',
        listOpen: false,
        activeItem: 'incident'
      }
    },
    methods: {
      fly() {
        /**
         * 切换地图状态
         */
        this.toggleMapState();
        this.map.flyTo(this.flyPos);
        /**
         * 隐藏列表内容
         */
        this.listOpen = false;
      },
      toggleMapState() {
        this.mapState = (this.mapState === 'map' ? 'weather' : 'map');
        if (!this.map) {
          /**
           * 找到map类来控制飞行
           */
          this.map = this.$parent.$refs.map.map;
          this.map.on('moveend', ()=> {
            if (this.mapState === 'map') {
              this.map.scrollZoom.enable();
              if(this.mapPos.pitch>0){
                this.map.dragRotate.enable();
              }
            } else {
              this.map.scrollZoom.disable();
            }
          });
        }
      },
      /**
       * 切换列表显示与隐藏
       */
      toggleList(){
        this.listOpen = !this.listOpen;
      },
      toggleListInfo(type){
        this.activeItem = type;
      }
    },
    computed: {
      /**
       * 计算飞行地点
       */
      flyPos: function () {
        if (this.mapState === 'map') {
          return this.mapPos;
        } else {
          this.mapPos.center = this.map.getCenter();
          this.mapPos.zoom = this.map.getZoom();
          this.mapPos.pitch = this.map.getPitch();
          this.mapPos.bearing = this.map.getBearing();

          return this.weatherPos;
        }
      },
      /**
       * 计算列表第一个按钮是否被激活
       */
      activeItem1: function () {
        return {
          'switch-button-active': this.activeItem === 'incident',   /* 交通事件*/
          'switch-button': true
        }
      },
      /**
       * 计算列表第二个按钮是否被激活
       */
      activeItem2: function () {
        return {
          'switch-button-active': this.activeItem === 'blackspot', /* 事故多发地 */
          'switch-button': true
        }
      }
    },
    destroyed(){
      this.map.off("moveend");
    }
  }

</script>
<style scope>
  .clear {
    clear: both;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-active {
    opacity: 0
  }

  .right-ctrl-panel {
    width: 300px;
    position: absolute;
    top: 5px;
    right: 0;
    height: 39px;
    z-index: 1;
    background-color: white;
    font-size: 12px;
    cursor: pointer;
  }

  .weather-ctrl {
    height: 39px;
    width: 170px;
    float: left;
    font-size: 12px;
    border: 1px solid #dcdcdc;
    text-align: center;
    box-sizing: border-box;
  }

  .info-ctrl {
    line-height: 39px;
    text-align: center;
  }

  .right-panel {
    position: absolute;
    width: 300px;
    height: 500px;
    right: 0;
    top: 50px;
    background-color: white;
  }

  .info-header {
    width: 300px;
    height: 38px;
    padding: 5px;
    box-sizing: border-box;
  }

  .switch-button {
    width: 50%;
    border: 1px solid #dcdcdc;
    text-align: center;
    float: left;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 16px;
  }

  .switch-button:hover {
    background-color: #dcdcdc;
  }

  .switch-button-active{
    background-color: #40c0f5;
    color: white;
  }
</style>
